<!--姓名，性别，出生年月-->
<template>
  <div>
    <van-cell required title="姓名"/>
    <van-field
      v-model="name"
      name="name"
      placeholder="例如：马云"
      clearable
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-cell required title="性别"/>
    <van-field
      v-model="sex"
      name="sex"
      placeholder="请填写您的性别"
      clearable
      :rules="[{ required: true, message: '请填写性别' }]"
    />
    <!--    出生日期-->
    <van-cell required title="出生日期"/>
    <van-field
      is-link
      readonly
      clickable
      name="birthday"
      :value="value"
      placeholder="请选择"
      @click="showPicker = true"
      :rules="[{ required: true, message: '请填写出生日期' }]"
      clearable
    />
    <van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }" round>
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="出生日期"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'username-sex',
  data () {
    return {
      name: '',
      sex: '',
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2020, 10, 1),
      currentDate: new Date(),
      showPicker: false,
      value: ''
    }
  },
  methods: {
    onConfirm (time) {
      this.value = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日'
      this.showPicker = false
    },
    // 格式化时间
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
